<template>
  <el-drawer
    title="落地页管理"
    :visible.sync="show"
    direction="rtl"
    :before-close="handleClose"
    :modal-append-to-body="false"
    size="50%"
  >
    <div class="drawer-container scorll-box">
      <el-radio-group v-model="activeTab" size="mini">
        <el-radio-button
          v-for="item in tabList"
          :key="item.name"
          :label="item.name"
          :value="item.name"
        >
          <div class="flex-c align-center">
            {{ item.name }}
          </div>
        </el-radio-button>
      </el-radio-group>
      <div v-if="activeTab==='新建落地页'||activeTab==='修改落地页'">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          style="margin-top: 30px"
        >
          <el-form-item label="落地页名称" prop="landingPageName">
            <el-input v-model="ruleForm.landingPageName" class="white" />
          </el-form-item>
          <el-form-item label="手机号" prop="isPhone">
            <div class="flex align-center">
              <div class="flex align-center">
                <mao-radio
                  v-model="ruleForm.isPhone"
                  value="1"
                  label="获取手机号"
                />
                <img src="@/assets/svg/qa.svg" alt="" class="qa pointer">
              </div>
              <div class="flex align-center">
                <mao-radio
                  v-model="ruleForm.isPhone"
                  value="0"
                  label="不获取手机号"
                />
                <img src="@/assets/svg/qa.svg" alt="" class="qa pointer">
              </div>
            </div>
          </el-form-item>
          <el-form-item label="页面标题" prop="pageTitle">
            <el-input v-model="ruleForm.pageTitle" class="white" />
          </el-form-item>
          <el-form-item label="按钮文字" prop="buttonText">
            <el-input v-model="ruleForm.buttonText" class="white" />
          </el-form-item>
          <el-form-item label="弹窗标题" prop="popupTitle">
            <el-input v-model="ruleForm.popupTitle" class="white" />
          </el-form-item>
          <el-form-item label="背景图" prop="backgroundImage">
            <upload
              ref="upload"
              :auto="false"
              :param="uploadParam"
              action="/cloudcut-api/publish/landPage-upload"
              :limit="1"
              accept="image/*"
              @getUrl="getUrl"
              @getFile="getFile"
              @getResult="getResult"
            >
              <div class="uplod-box flex-c flex-v align-center pointer">
                <img src="@/assets/images/upload.png" alt="" class="upload">
                上传素材
              </div>
              <div
                slot="tip"
                class="sub"
                style="
                color: rgba(128, 128, 128, 1);
                font-size: 13px;
                position: relative;
                top: -10px;
              "
              >
                格式支持：jpeg/png/jpg/bmp,大小1020*1980px
              </div>
            </upload>
          </el-form-item>
        </el-form>
        <div v-if="backgroundImage" class="video-list">
          <div
            class="video-item rel"
          >
            <img
              :src="backgroundImage"
              alt=""
              class="poster"
              crossorigin="anonymous"
            >
            <div class="flex-c flex-v align-center">
              <el-button type="danger" style="margin-top: 5px;" size="mini" @click="delBg">删除</el-button>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="video-list" style="padding-top: 30px;">
        <div
          v-for="(item) in ldyList"
          :key="item.id"
          class="video-item rel"
        >
          <img
            :src="item.backgroundImage"
            alt=""
            class="poster"
            crossorigin="anonymous"
          >
          <div class="flex-c flex-v align-center">
            <div class="name nowrap">{{ item.landingPageName }}</div>
            <div class="flex-c align-center">
              <el-button type="primary" style="margin-top: 5px;" size="mini" @click="toEdit(item)">编辑</el-button>
              <el-button type="danger" style="margin-top: 5px;" size="mini" @click="delById(item.id)">删除</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="flex-e align-center"
      style="
            padding-top: 10px;
            border-top: 1px solid rgba(128, 128, 128, 0.2);
          "
    >
      <el-button
        v-if="activeTab==='新建落地页'"
        type="primary"
        @click="submit"
      >创建</el-button>
      <el-button
        v-if="activeTab==='修改落地页'"
        type="primary"
        @click="submitUpdate"
      >修改</el-button>
    </div>
  </el-drawer>
</template>
<script>
import MaoRadio from '@/components/MaoRadio/index.vue'
import { getToken } from '@/utils/auth'
import Upload from '@/components/Upload/Index.vue'
import { addLdy, updateLdy, getLdyDetail, delLdy, getLdyList } from '@/api/publish'
export default {
  components: { MaoRadio, Upload },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      uploadParam: {
        file: ''
      },
      backgroundImage: '',
      ruleForm: {
        id: '',
        landingPageName: '',
        isPhone: '',
        pageTitle: '',
        buttonText: '',
        popupTitle: '',
        backgroundImage: ''
      },
      rules: {
        landingPageName: [{ required: true, message: '此项必填', trigger: 'blur' }],
        isPhone: [{ required: true, message: '此项必填', trigger: 'blur' }],
        pageTitle: [{ required: true, message: '此项必填', trigger: 'blur' }],
        buttonText: [{ required: true, message: '此项必填', trigger: 'blur' }],
        popupTitle: [{ required: true, message: '此项必填', trigger: 'blur' }],
        backgroundImage: [{ required: true, message: '此项必填', trigger: 'blur' }]
      },
      activeTab: '新建落地页',
      tabList: [{ name: '新建落地页' }, { name: '管理落地页' }],
      fileList: [],
      ldyList: [],
      currentId: ''
    }
  },
  computed: {
    headers() {
      return {
        'X-Access-Token': getToken(),
        'X-Login-Type': 'user'
      }
    },
    oss() {
      return this.$oss
    }
  },
  watch: {
    id(val) {
      this.currentId = val
    },
    activeTab(val) {
      if (val === '管理落地页') {
        this.getList()
      } else if (this.currentId || this.id) {
        this.getDetail()
      }
      if (val === '新建落地页') {
        for (const key in this.ruleForm) {
          this.ruleForm[key] = ''
        }
        this.backgroundImage = ''
      }
    },
    'ruleForm.backgroundImage': {
      handler(val) {
        this.backgroundImage = val
      }
    }
  },
  created() {
    if (this.id) {
      this.currentId = this.id
    }
  },
  methods: {
    async toEdit(row = {}) {
      this.currentId = row.id
      const res = await this.getDetail()
      this.activeTab = '修改落地页'
      this.tabList[0].name = '修改落地页'
      for (const key in this.ruleForm) {
        this.ruleForm[key] = res[key] || ''
        if (key === 'isPhone') {
          this.ruleForm[key] = res[key].toString()
        }
      }
    },
    async delById(id = '') {
      const res = await delLdy({ id })
      if (res.success) {
        this.$message.success('删除成功')
        this.getList()
      } else {
        this.$message.error(res.message)
      }
    },
    async getList() {
      this.activeTab = '管理落地页'
      this.tabList[0].name = '新建落地页'
      const res = await getLdyList()
      if (res.success) {
        this.ldyList = res.result.records || []
      }
    },
    async getDetail() {
      return new Promise(resolve => {
        const id = this.currentId || this.id
        getLdyDetail({
          id: id.toString()
        }).then(res => {
          if (res.success) {
            resolve(res.result)
          } else {
            resolve()
          }
        })
      })
    },
    async submit() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          const res = await addLdy(this.ruleForm)
          if (res.success) {
            this.$message.success('添加成功')
            this.activeTab = '管理落地页'
          } else {
            this.$message.error(res.message)
          }
        }
      })
    },
    async submitUpdate() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          const res = await updateLdy({
            ...this.ruleForm,
            id: this.ruleForm.id.toString()
          })
          if (res.success) {
            this.$message.success('修改成功')
            this.activeTab = '管理落地页'
          } else {
            this.$message.error(res.message)
          }
        }
      })
    },
    handleClose() {
      this.$emit('close')
    },
    async getFile(file) {
      this.uploadParam.file = file
      await this.$refs.upload.submit()
    },
    async getUrl(url) {
      this.backgroundImage = url
    },
    getResult({ url }) {
      this.$set(this.ruleForm, 'backgroundImage', url)
      this.backgroundImage = url
    },
    delBg() {
      this.$set(this.ruleForm, 'backgroundImage', '')
      this.backgroundImage = ''
      this.uploadParam.file = ''
    }
  }
}
</script>
<style lang="scss" scoped>
.qa {
  width: 14px;
  height: 14px;
  position: relative;
  right: 45px;
}
.drawer-container {
  box-sizing: border-box;
  padding: 0 20px 20px;
  overflow-y: auto;
  height: calc(100vh - 140px);
}
.uplod-box {
  width: 90px;
  height: 90px;
  border-radius: 15px;
  border: 0.5px dashed rgba(128, 128, 128, 1);
  margin-right: 12px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(128, 128, 128, 1);
  line-height: 1.5;
  .upload {
    width: 28px;
    margin-bottom: 6px;
  }
}
.video-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 30px;
  grid-row-gap: 20px;
  box-sizing: border-box;
  padding: 0 30px;
}
.video-item-header {
  box-sizing: border-box;
  padding: 4px 6px;
}
.video-item {
  width: 160px;
  height: 284px;
  .poster {
    width: 160px;
    height: 284px;
  }
}
</style>
